<template>
  <div class="wallet-out">
    <header-bar tittle="提现" />

    <div class="bg"></div>

    <div class="main">
      <div class="title-box">
        <div class="title">可提现金额</div>
        <div class="price">{{ total }}</div>
      </div>

      <div class="card">
        <div class="title">选择提现众币</div>

        <div class="money-box">
          <div
            class="money"
            :class="monney == 50 ? 'change' : ''"
            @click="checkMoney(50)"
          >
            50众币
          </div>
          <div
            class="money"
            :class="monney == 100 ? 'change' : ''"
            @click="checkMoney(100)"
          >
            100众币
          </div>
          <div
            class="money"
            :class="monney == 150 ? 'change' : ''"
            @click="checkMoney(150)"
          >
            150众币
          </div>
          <div
            class="money"
            :class="monney == 200 ? 'change' : ''"
            @click="checkMoney(200)"
          >
            200众币
          </div>
          <div
            class="money"
            :class="monney == 300 ? 'change' : ''"
            @click="checkMoney(300)"
          >
            300众币
          </div>
          <div
            class="money"
            :class="monney == 500 ? 'change' : ''"
            @click="checkMoney(500)"
          >
            500众币
          </div>
        </div>
      </div>

      <div class="account-box">
        <div class="title u-flex-bet">
          <div class="name">提现到</div>

          <div class="band u-flex" @click="account()">
            <van-image
              width="32rem"
              height="32rem"
              :src="require('@/assets/images/wallet/icon_bdzh@2x.png')"
            />
            <span>绑定账号</span>
          </div>
        </div>

        <div
          class="account u-flex-bet"
          v-for="(item, index) in accountInfo"
          @click="select(item.type, item.payee_account)"
        >
          <div class="info u-flex">
            <van-image
              v-if="type == item.type"
              width="32rem"
              height="32rem"
              :src="require('@/assets/images/wallet/select.png')"
            />

            <van-image
              v-if="type != item.type"
              width="32rem"
              height="32rem"
              :src="require('@/assets/images/wallet/icon_unselect@2x.png')"
            />
            <span>{{ item.payee_channel }}({{ item.payee_account }})</span>
          </div>

          <van-image
            @click.stop="edit(item)"
            width="28rem"
            height="28rem"
            :src="require('@/assets/images/wallet/icon_edit@2x.png')"
          />
        </div>
      </div>

      <div class="btn-box u-flex-center" @click="walltOuts">
        <div class="btn">立即提现</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import header from "@/components/header/header.vue";
import { Field } from "vant";
import {
  Button,
  Toast,
  Image as VanImage,
  Cell,
  CellGroup,
  Uploader,
  sticky,
} from "vant";
import { API_PATH } from "@/api/index.js";
import { LIST_ACCOUNT, WALL_OUT } from "@/api/api.js";
// import { Field } from 'vant';
Vue.use(Field);
Vue.use(VanImage);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Uploader);
Vue.use(sticky);
export default {
  name: "walletOut",
  components: {
    [header.name]: header,
    [Button.name]: Button,
  },
  data() {
    return {
      accountInfo: "",
      img: require("../.././assets/images/bind.png"),
      monney: 1,
      type: 0,
      total: "",
      accountSelect: "",
    };
  },
  mounted() {
    this.getAccountList();
    let data = this.$route.query.data;
    this.total = data;
  },
  methods: {
    async getAccountList() {
      const { data } = await this.$reqGet(LIST_ACCOUNT, {});
      console.log(data);
      if (data.status == 1) {
        let accountInfo = data.data;
        console.log(accountInfo);
        this.type = accountInfo[0].type;
        this.accountSelect = accountInfo[0].payee_account;
        this.accountInfo = accountInfo;
      }
    },
    select(type, account) {
      this.type = type;
      this.accountSelect = account;
    },
    account() {
      this.$router.push({ name: "cash" });
    },
    checkMoney(m) {
      this.monney = m;
    },
    edit(item) {
      let data = encodeURI(JSON.stringify(item));
      this.$router.push({ name: "cash", query: { data, item } });
    },
    async walltOuts() {
      if (this.total <= this.monney) {
        Toast.fail("提现失败!");
        return;
      }
      let datas = {
        amount: this.monney,
        channel: this.type,
        payee_account: this.accountSelect,
      };
      const { data } = await this.$reqPost(WALL_OUT, datas);
      let that = this;
      if (data.status == "1") {
        Toast.success({
          message: "提现申请成功!",
          onClose: function() {
            that.$router.push({ name: "wallet" });
          },
        });
      }
      if (data.status == 0) {
        Toast.fail(data.info);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wallet-out {
  min-height: 100vh;
  background-color: #f5f5f5;
  text-align: left;
  font-size: 28rem;

  .bg {
    position: absolute;
    height: 464rem;
    background: linear-gradient(
      180deg,
      #2f81fe 80%,
      rgba(47, 129, 254, 0) 100%
    );
  }

  .main {
    position: relative;
    padding: 24rem;

    .title-box {
      color: #fff;
      margin-bottom: 24rem;
      .title {
        font-size: 26rem;
        margin-bottom: 16rem;
      }

      .price {
        font-weight: bold;
        font-size: 52rem;
      }
    }

    .card {
      background-color: #fff;
      border-radius: 20rem;
      padding: 24rem;
      background-color: #fff;

      .title {
        font-size: 32rem;
        font-weight: bold;
      }

      .money-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .money {
          width: 200rem;
          height: 104rem;
          text-align: center;
          line-height: 104rem;
          background-color: #f5f5f5;
          border-radius: 20rem;
          margin-top: 24rem;
          font-size: 28rem;
          color: #66696e;
          font-weight: bold;
        }

        .change {
          box-shadow: 0px 6rem 12rem rgba(59, 135, 247, 0.3);
          background-color: var(--theme);
          color: #fff;
        }
      }
    }

    .account-box {
      padding: 24rem;
      border-radius: 20rem;
      margin-top: 34rem;
      background-color: #fff;

      .name {
        font-size: 32rem;
        font-weight: bold;
      }

      .band {
        span {
          color: var(--theme);
          margin-left: 14rem;
          font-size: 28rem;
        }
      }

      .account {
        padding: 24rem 0;
        border-bottom: 2rem solid #f8f8f8;
        margin-top: 24rem;

        span {
          color: #66696e;
          margin-left: 16rem;
        }

        &:last-child {
          border: 0;
        }
      }
    }

    .btn-box {
      margin-top: 80rem;
      height: 88rem;
      border-radius: 44rem;
      background: linear-gradient(145deg, #2cb1ff 0%, #2f81fe 100%);
      color: #fff;
      font-weight: bold;
      font-size: 32rem;
      box-shadow: 0px 4rem 12rem rgba(75, 150, 255, 0.3);

      .btn {
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>
